import React from 'react';
import Chart from 'echarts-for-react';
import { Radio } from 'antd';
import {dailySoilRestoration} from '../../../services/cockpit';

const RadioGroup = Radio.Group;

// let data = {
//     dataValue:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
//     time:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
// }

class MyLineR extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value:1,
            dataList: '',
        };
    }
    componentDidMount() {

        dailySoilRestoration({findType:1}).then(data => {
            let dataList = data.data.ret;
            this.setState({
                dataList
            })
        })
    }

    onChange = (e) => {
        let params = {findType:e.target.value};
        dailySoilRestoration(params).then(data => {
            let dataList = data.data.ret;
            this.setState({
                value: e.target.value,
                dataList
            })
        });
    };
    setOption = () => {
        let myOption;
        let data = this.state.dataList;
        myOption = {
        textStyle:{color:'#fff'},
        color:'#2EC2FF',
        tooltip: {
            trigger: 'axis',
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        xAxis: [
            {
                axisLine:{lineStyle:{color:'#66ABFF'}},
                type: 'category',
                boundaryGap:false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data.time
            }
        ],
        yAxis: [
            {
                axisLine:{lineStyle:{color:'#66ABFF'}},
                splitLine:{show:false},
                type: 'value',
                name: '土壤修复量(t)',
            }
        ],
        series: [
            {
                name:'土壤修复量(t)',
                type:'line',
                showSymbol:false,
                itemStyle:{
                    shadowColor: '#fff',
                    shadowBlur:11
                },
                areaStyle: {
                    opacity:0.1
                },
                data:data.dataValue
            },
        ]
    };
        return myOption;
    };
    render() {
        return (
            <div>
                <div style={{position: 'absolute', right: '20px'}}>
                    <RadioGroup onChange={this.onChange} value={this.state.value}>
                        <Radio value={1}><span style={{color:'#fff'}}>一周</span></Radio>
                        <Radio value={2}><span style={{color:'#fff'}}>一个月</span></Radio>
                        <Radio value={3}><span style={{color:'#fff'}}>三个月</span></Radio>
                    </RadioGroup>
                </div>
                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: 290 }}
                />
            </div>
        )
    }
}
export default MyLineR;
